<template>
  <div class="demo-pagination-block">
    <el-pagination
        v-model:current-page="currentPage3"
        v-model:page-size="pageSize3"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="prev, pager, next, jumper"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 10px"/>
  </div>
</template>

<script>
import { ref } from 'vue'

const currentPage1 = ref(1)
const currentPage2 = ref(2)
const currentPage3 = ref(3)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
export default {
  name: "Pagination",
  setup(){
    function handleSizeChange(val){
      console.log(`${val} items per page`)
    }
    function handleCurrentChange(val){
      // console.log(`current page: ${val}`)
      console.log("current page:"+val)
    }
    return{
      currentPage1,
      currentPage2,
      currentPage3,
      currentPage4,
      pageSize2,
      pageSize3,
      pageSize4,
      small,
      disabled,
      background,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>

</style>